<template>
  <div :style="style" class="flex items-center justify-center ">
    <img v-if="src" class="w-full h-full"
         :src="src" :alt="src"/>
  </div>
</template>

<script setup lang="ts">

import {computed} from "vue";


const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 0
  },
  height: {
    type: Number,
    default: 0
  }
})

const style = computed(() => {
  let w = ''
  let h = ''
  if (props.width) {
    w = props.width + 'px'
  }
  if (props.height) {
    h = props.height + 'px'
  }
  if (props.size) {
    w = props.size + 'px'
    h = props.size + 'px'
  }
  return {
    width: w,
    height: h
  }
})

</script>

<style scoped>

</style>